import * as React from 'react';
import { Card, Empty } from 'antd';
const { useState, useEffect, useMemo } = React;
import moment from 'moment';
import { api } from '../../../common/api';
import SlowCgiItem from './slow-cgi-item';


interface SlowCgiProps {
    projectId: number,
    selectDate: string,
}

export default function SlowCgi(props: SlowCgiProps) {
    const { projectId, selectDate } = props;
    const [loading, setLoading] = useState(true);
    const [slowCGIs, setSlowCGIs] = useState(null);
    const [avgMax, setAvgMax] = useState(0);
    const [timesMax, setTimesMax] = useState(-Infinity);
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);

    useEffect(() => {
        setLoading(true);
        async function fetchData() {
            const start = moment(selectDate).startOf('d').unix() * 1000;
            const end = moment(selectDate).endOf('d').unix() * 1000;
            const result: { times: string, avg: number, url: string }[] = await api({
                method: 'GET',
                url: `speed-server/${projectId}/fetch-top`,
                params: {
                    startDate: start,
                    endDate: end,
                    limit: 10
                }
            }) as any;
            setLoading(false);
            if (result && result.length === 0) {
                return;
            }
            let tempTimesMax = -Infinity;
            result.forEach(cgi => {
                const times = parseInt(cgi.times);
                if (times > tempTimesMax) {
                    tempTimesMax = times;
                }
            });
            setSlowCGIs(result);
            setStartDate(start);
            setEndDate(end);
            setTimesMax(tempTimesMax);
            setAvgMax(result[0].avg);
        }
        fetchData();
    }, [projectId, selectDate]);


    return (
        <div className="slow-cgi-wrapper">
            <Card
                loading={loading}
                bordered={false}
                hoverable={true}
                style={{
                    width: '94%'
                }}
            >
                {
                    slowCGIs && slowCGIs.length > 0 ? <div className='slow-cgi'>
                        {
                            slowCGIs.map(
                                (cgi, index) => <SlowCgiItem
                                    key={index}
                                    url={cgi.url}
                                    projectId={projectId}
                                    times={cgi.times}
                                    avg={cgi.avg}
                                    timesMax={timesMax}
                                    avgMax={avgMax}
                                    startDate={startDate}
                                    endDate={endDate}
                                />
                            )
                        }
                    </div> : <Empty></Empty>
                }
            </Card>
        </div>
    );
}